<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        dfsafdsafd{{mydata}}fdsafdsa
        <span>我是span</span>
        <p>我是段落</p>
    </div>
    <script>
        var data = {
            mydata: "数据",
        }

        var oldvalue;  // 记录初次渲染时候的值；
        // 把data数据修改成可控 ，可以被观察的对象 ；
        // 这个函数可以 把普通对象转成 可控对象 ；
        var newdata;
        function observer(obj) {
             newdata = new Proxy(data, {
                get: function (target, key) {
                    return target[key];
                },
                set: function (target, key, newValue) {
                    var appEle = document.querySelector("#app");
                    compile(appEle, newValue);
                    value = newValue;
                }
         })




            // 改成Proxy
            // for (var key in obj) {
            //     let value = obj[key];
            //     Object.defineProperty(obj, key, {
            //         configurable: true,
            //         enumerable: true,
            //         get: function () {
            //             console.log("get");
            //             return value;
            //         },
            //         set: function (newvalue) {
            //             console.log("数据改变了");
            //             // 二次做数据渲染 
            //             var appEle = document.querySelector("#app");
            //             compile(appEle, newvalue);
            //             value = newvalue;
            //         }
            //     })
            // }
        }

        observer(data);
        console.log(data);





        // 1.获取 id是app范围内的文本 
        var appEle = document.querySelector("#app");
        compile(appEle);
        function compile(appEle, newvalue) {
            var childs = appEle.childNodes;  // 获取 app下的所有节点 ；
            // console.log(childs);
            childs.forEach(function (node) {
                if (node.nodeType == 3) {
                    var content = node.textContent;// 获取文本节点里的文本
                    var reg1 = /\s+/g;  // 匹配空格 
                    content = content.replace(reg1, "");  // 把content里的空格全部去掉

                    if (content) {
                        var reg2 = /\{\{([^{}]+)\}\}/g;
                        if (!newvalue) {
                            // 初次渲染
                            if (reg2.test(content)) {
                                var $1 = RegExp.$1;  // 获取到小括号里匹配的内容
                                // if(!newvalue){
                                oldvalue = data[$1];  // 初次渲染的时候记录 旧的值 "数据"
                                // 初次渲染
                                node.textContent = node.textContent.replace(reg2, data[$1]); // 获取 内容 在替换成 data里的数据
                                //
                            }
                        } else {
                            // 修改之后再渲染 
                            console.log(oldvalue);
                            // 匹配 旧的值  ，使用新值 替换旧的值
                            node.textContent = node.textContent.replace(oldvalue, newvalue);
                        }
                    }
                } else if (node.nodeType == 1) {
                    // 是元素 
                    compile(node);
                }
            })
        }








        // ${变量} 插值表达式   {{变量}}
        // var str = `fdsafdsa${data.message}fdafdsa`;
        // console.log(str);



    </script>
</body>

</html>